<template>
  <el-card>
    <span>搜索用户数
      <i class="el-icon-warning-outline" style="float: right;margin-right: 20px" />
    </span>
    <div class="text">
      <span>12321</span>
      <span>17.1</span>
      <i class="el-icon-bottom" />
      <i class="el-icon-top" />
      <div ref="bar" style="width: 100%;height: 50px" />
    </div>
  </el-card>
</template>

<script>
import * as ECharts from 'echarts'
export default {
  name: 'Index',
  mounted() {
    const myCharts = ECharts.init(this.$refs.bar)
    myCharts.setOption({
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {

      },
      grid: {
        left: 0,
        right: 0,
        bottom: 0,
        top: 0
      },
      series: [
        {
          data: [400, 200, 400, 934, 600, 300, 500],
          type: 'line',
          smooth: true,
          itemStyle: {
            opacity: 0
          },
          // 背景填充颜色
          areaStyle: {
            color: {

              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: '#bfa' // 0% 处的颜色
              }, {
                offset: 1, color: 'green' // 100% 处的颜色
              }],
              global: false // 缺省为 false
            }
          },
          color: {

            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0, color: 'red' // 0% 处的颜色
            }, {
              offset: 1, color: 'blue' // 100% 处的颜色
            }],
            global: false // 缺省为 false

          }
        }
      ]
    })
  }
}
</script>

<style scoped>
.text span{
   margin: 10px;
}
.text i:nth-child(3){
  color: #bfa;
  font-size: 20px;
  font-weight: bold;
}
.text i:nth-child(4){
  color: red;
  font-size: 20px;
  font-weight: bold;
}
</style>
